<template>
    <el-dialog 
        v-model="dialogVisible" 
        title="选择文件" 
        width="80%"
        :before-close="handleClose"
        :destroy-on-close="true"
    >
        <FileManager 
            :selectable="true"
            :multiple="props.multiple"
            @select="handleSelect"
            :suffixes="props.suffixes"
        />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="handleConfirm">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, defineProps, PropType } from 'vue'
import FileManager from '@/components/FileManager/index.vue'

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    multiple: {
        type: Boolean,
        default: false
    },
    suffixes: {
        type: Array as PropType<string[]>,
        default: () => []
    }
})

const emit = defineEmits(['update:modelValue', 'select'])

const dialogVisible = ref(props.modelValue)
const selectedFiles = ref<any[]>([])

// 监听对话框显示状态
watch(() => props.modelValue, (val) => {
    dialogVisible.value = val
})

watch(() => dialogVisible.value, (val) => {
    emit('update:modelValue', val)
})

// 处理文件选择
const handleSelect = (files: any[]) => {
    selectedFiles.value = files
}

// 确认选择
const handleConfirm = () => {
    emit('select', selectedFiles.value)
    handleClose()
}

// 关闭对话框
const handleClose = () => {
    dialogVisible.value = false
    selectedFiles.value = []
}
</script>

<style scoped lang="scss">
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
</style> 